<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>创建赛题</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <style>
        .layui-input:focus, .layui-textarea:focus {
            border-color: #1E9FFF !important
        }

        .layui-form-item {
            margin-bottom: 0;
        }
        .layui-form-label {
            padding-top: 5px;
            padding-bottom: 6px;
        }
        .layui-input-inline{
            width: 400px !important;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
<!--        <form class="layui-form">-->
            <div class="layui-form-item" style="margin-bottom: 3px;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>赛题名称</label>
                <div class="layui-input-inline">
                    <input type="text" required lay-verify="required" id="competition_name" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 4px">
                <label class="layui-form-label">
                    <span class="x-red">*</span>赛题描述</label>
                <div class="layui-input-inline">
                    <textarea id="competition_desc" required lay-verify="required" class="layui-textarea"></textarea>
                </div>

            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>举办方</label>
            <div class="layui-input-inline">
                <input type="text" required lay-verify="required" id="owner" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>训练集</label>
<!--                <div class="layui-input-inline">-->
<!--                    <input type="file" name="file" id="train_data" style="margin-top: 7px" required lay-verify="required">-->
<!--                </div>-->
                <button id='train_data' class="layui-btn layui-btn-normal" style="margin-top: 5px"><i class="layui-icon">&#xe67c</i>上传</button>
               <label id='train_data_name' class="layui-label" ></label>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>测试集</label>
<!--                <div class="layui-input-inline">-->
<!--                    <input type="file" name="file" id="test_data" style="margin-top: 7px" required lay-verify="required">-->
<!--                </div>-->
<!--                <button id='test_reupload' class="layui-btn layui-btn-normal"  style="display: none">重新上传</button>-->
                <button id='test_data' class="layui-btn layui-btn-normal" style="margin-top: 5px"><i class="layui-icon">&#xe67c</i>A榜</button>
                <button id='test_data_B' class="layui-btn layui-btn-normal" style="margin-top: 5px"><i class="layui-icon">&#xe67c</i>B榜</button>
                <label id='test_data_name' class="layui-label" ></label>
                <label id='test_data_name_B' class="layui-label" ></label>
            </div>

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">-->
<!--                <span class="x-red">*</span>B榜测试集</label>-->
<!--            &lt;!&ndash;                <div class="layui-input-inline">&ndash;&gt;-->
<!--            &lt;!&ndash;                    <input type="file" name="file" id="test_data" style="margin-top: 7px" required lay-verify="required">&ndash;&gt;-->
<!--            &lt;!&ndash;                </div>&ndash;&gt;-->
<!--            &lt;!&ndash;                <button id='test_reupload' class="layui-btn layui-btn-normal"  style="display: none">重新上传</button>&ndash;&gt;-->

<!--        </div>-->
        <div class="layui-form-item" style="margin-top: 5px">
            <label class="layui-form-label">
                <span class="x-red">*</span>数据描述</label>
            <div class="layui-input-inline">
                <textarea id="data_desc" required lay-verify="required" class="layui-textarea"></textarea>
            </div>

        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>开始时间</label>
                <div class="layui-input-inline">
                    <input id="start_time" required lay-verify="required" autocomplete="off" class="layui-input" style="margin-top: 5px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>A榜结束时间</label>
                <div class="layui-input-inline">
                    <input id="end_time"  autocomplete="off" class="layui-input" name='end_time' lay-verify="end_time" style="margin-top: 5px">
                </div>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>B榜结束时间</label>
            <div class="layui-input-inline">
                <input id="end_time_B"  autocomplete="off" class="layui-input" name='end_time' lay-verify="end_time" style="margin-top: 5px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>评价指标</label>
            <div class="layui-input-inline">
                <select id="evaluation" style="margin-top: 5px;width: 70px">
                    <option>KS</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>成绩占比</label>
                <div class="layui-input-inline" >
                    <input id="ratio_A"  placeholder="A榜占比" class="layui-input" style="margin-top: 5px;width: 70px;display: inline-block">
                    <input id="ratio_B"  placeholder="B榜占比" class="layui-input" style="margin-top: 5px;width: 70px;display: inline-block">
                </div>
            <div class="layui-input-inline" style="width: 50px">

            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button id='add' class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="" style="margin-top: 5px; width: 190px">创建</button>
            </div>
<!--        </form>-->
    </div>
</div>

</body>
<script src="../../lib/jquery.min.js"></script>
<script src="../../js/const.js"></script>
<script src="../../js/util.js"></script>
<script>
    layui.use('laydate',
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start_time', //指定元素
                theme: '#1E9FFF',
                value: new Date(),
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end_time', //指定元素
                theme: '#1E9FFF',
                value: new Date(),
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime'
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end_time_B', //指定元素
                theme: '#1E9FFF',
                value: new Date(),
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime'
            });

        });</script>
<script>
    var is_success_train = false;
    var is_success_test_A = false;
    var is_success_test_B = false;
    var train_data_url = '';
    var test_data_url_A = '';
    var test_data_url_B = '';
    layui.use('upload', function () {
        var upload = layui.upload;
        var layer = layui.layer;
            //upload
        upload.render({
            elem: '#train_data', //指定元素
            url: '/file_upload',
            accept: 'file',
            // auto:false,
            // bindAction: '#train_reupload',
            choose:function(obj){
                obj.preview(function (index,file,result) {
                    $('#train_data_name').html(file.name);
                });
                // console.log(obj);
                // obj.pushFile();
            },
            before:function(obj){
                layer.load();
            },
            done: function (res, index, upload) {
                console.log(res);
                train_data_url = res.data.url;
                is_success_train=true;
                layer.closeAll('loading');
                layer.msg('训练集上传成功',{icon:1, time:msgTime});
                $('#train_data_name').append("<i class='layui-icon' style='color: #009688'>&#xe605</i>")
                // $('#test_reupload').click();
            },
            error:function (index, upload) {
                is_success_train=false;
                layer.closeAll('loading');
                layer.msg('训练集上传失败',{icon:2, time:msgTime});
                $('#train_data_name').append("<i class='layui-icon' style='color: #FF5722'>&#x1006</i>")
            }
            });
        upload.render({
            elem: '#test_data', //指定元素
            url: '/file_upload',
            accept: 'file',
            // auto:false,
            // bindAction: '#test_reupload',
            choose:function(obj){
                obj.preview(function (index,file,result) {
                    $('#test_data_name').html(file.name);
                });
                // console.log(obj);
                // obj.pushFile();
            },
            before:function(obj){
                layer.load();
            },
            done: function (res, index, upload) {
                test_data_url_A = res.data.url;
                is_success_test_A = true;
                layer.closeAll('loading');
                layer.msg('A榜测试集上传成功',{icon:1, time:msgTime});
                $('#test_data_name').append("<i class='layui-icon' style='color: #009688'>&#xe605</i>")
            },
            error:function (index, upload) {
                is_success_test_A = false;
                layer.closeAll('loading');
                layer.msg('A榜测试集上传失败',{icon:2, time:msgTime});
                $('#test_data_name').append("<i class='layui-icon' style='color: #FF5722'>&#x1006</i>")
            }
        });

        upload.render({
            elem: '#test_data_B', //指定元素
            url: '/file_upload',
            accept: 'file',
            // auto:false,
            // bindAction: '#test_reupload',
            choose:function(obj){
                obj.preview(function (index,file,result) {
                    $('#test_data_name_B').html(file.name);
                });
                // console.log(obj);
                // obj.pushFile();
            },
            before:function(obj){
                layer.load();
            },
            done: function (res, index, upload) {
                test_data_url_B = res.data.url;
                is_success_test_B = true;
                layer.closeAll('loading');
                layer.msg('B榜测试集上传成功',{icon:1, time:msgTime});
                $('#test_data_name_B').append("<i class='layui-icon' style='color: #009688'>&#xe605</i>")
            },
            error:function (index, upload) {
                is_success_test_B = false;
                layer.closeAll('loading');
                layer.msg('B榜测试集上传失败',{icon:2, time:msgTime});
                $('#test_data_name_B').append("<i class='layui-icon' style='color: #FF5722'>&#x1006</i>")
            }
        });

        });</script>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            // $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                end_time: function (value) {

                }
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    // console.log(data);

                    var competition_name = $('#competition_name').val().trim();
                    if (competition_name == null || competition_name == ""){
                        layer.msg('赛题名称不能为空',{icon:2, time:msgTime});
                        return;
                    }
                    var competition_desc = $('#competition_desc').val().trim();
                    if (competition_desc == null || competition_desc == ""){
                        layer.msg('赛题描述不能为空',{icon:2, time:msgTime});
                        return;
                    }
                    var owner = $('#owner').val().trim();
                    if (owner == null || owner == ""){
                        layer.msg('举办方不能为空',{icon:2, time:msgTime});
                        return;
                    }
                    if(!is_success_train){
                        layer.msg('请上传训练集',{icon:2, time:msgTime});
                        return;
                    }
                    if(!is_success_test_A){
                        layer.msg('请上传A榜测试集',{icon:2, time:msgTime});
                        return;
                    }
                    if(!is_success_test_B){
                        layer.msg('请上传B榜测试集',{icon:2, time:msgTime});
                        return;
                    }
                    var data_desc = $('#data_desc').val().trim();
                    if (data_desc == null || data_desc == ""){
                        layer.msg('数据描述不能为空',{icon:2, time:msgTime});
                        return;
                    }
                    var start_time = $('#start_time').val();
                    var end_time_A = $('#end_time').val();
                    var end_time_B = $('#end_time_B').val();
                    start_time = new Date(start_time).getTime();
                    end_time_A = new Date(end_time_A).getTime();
                    end_time_B = new Date(end_time_B).getTime();
                    if (start_time >= end_time_A) {
                        layer.msg('A榜结束时间必须大于开始时间',{icon:2});
                        return;
                    }
                    if (end_time_A >= end_time_B) {
                        layer.msg('B榜结束时间必须大于A榜结束时间',{icon:2});
                        return;
                    }
                    var evaluation = $('#evaluation').val().trim();
                    if (evaluation == null || evaluation == ""){
                        layer.msg('评价指标不能为空',{icon:2, time:msgTime});
                        return;
                    }
                    var ratio_A = $('#ratio_A').val().trim();
                    var ratio_B = $('#ratio_B').val().trim();
                    if (ratio_A == null || ratio_A == "" ||ratio_B == null || ratio_B == ""){
                        layer.msg('成绩占比不能为空',{icon:2, time:msgTime});
                        return;
                    }

                    var data = {};
                    data.competition_name = competition_name;
                    data.competition_desc = competition_desc;
                    data.data_desc = data_desc;
                    data.start_time = start_time;
                    data.end_time_A = end_time_A;
                    data.end_time_B = end_time_B;
                    data.train_data_url = train_data_url;
                    data.test_data_url_A = test_data_url_A;
                    data.test_data_url_B = test_data_url_B;
                    data.owner = owner;
                    data.creator = util.getLocalStorage("user").userName;
                    data.evaluation = evaluation;
                    data.ratio_A = ratio_A;
                    data.ratio_B = ratio_B;
                    layer.load();
                    util.sendPOST("/add_competition", data, function (reponse) {
                                console.log(reponse)
                        layer.closeAll("loading");
                        layer.msg('创建成功',{icon:1, time:msgTime},function () {
                            location.reload();
                        });

                            }, function (reponse) {
                        layer.msg('创建失败',{icon:2, time:msgTime});
                            });
                });

        });</script>
</html>